<template>
  <div>
    <MainFrame menuIndex="JoinList">
      <div slot='content'>
        <div class="top-title">
          参赛选手详情
        </div>
        <div class="top-button">
          <el-button type="primary" @click="back">返回</el-button>
        </div>
        <ttForm v-model="form">
          <div slot="slot">
            <el-form-item label="内容">
              <editor id="editor_1" height="700px" width="100%" :content="form.items[2].value" pluginsPath="/static/kindeditor/plugins/" :loadStyleMode="false" @on-content-change="onContentChange" uploadJson="/toupiao/api/uploadEditorImg" filePostName="file" :items="toolbarItems"></editor>
            </el-form-item>
          </div>
        </ttForm>
      </div>
    </MainFrame>
  </div>
</template>
<script>
import MainFrame from '@/components/MainFrame'
import utils from '../ttJs/utils.js'
import ttForm from '@/tt_components/ttForm'
export default {
  components: {
    MainFrame,
    ttForm
  },
  data() {
    var validator = (rule, value, callback) => {
      callback();
    };
    return {
      activityId: null,
      type: null,
      form: {
        id: null,
        url: '/toupiao/admin/submitJoin',
        items: [
          // { name: 'no', value: '', label: '编号', placeholder: '请输入编号', type: 'input', rules: true, msg: '编号不能为空' },
          { name: 'title', value: '', label: '标题', placeholder: '请输入标题', type: 'input', rules: true, msg: '标题不能为空' }, // 0
          { name: 'address', value: '', label: '地址', placeholder: '请输入地址', type: 'input' }, // 1
          { name: 'content', value: '', type: 'slot' }, // 2
          { name: 'cover', value: '', imgUrl: '', label: '封面', type: 'img', url: '/toupiao/api/upload', index: 3, limit: 1 }, // 3
          { name: 'logo', value: '', list: [], label: '宣传图', type: 'images', url: '/toupiao/api/upload', index: 4, limit: 6, multiple: false }, // 4
          { name: 'images', value: '', list: [], label: '详情图', type: 'images', url: '/toupiao/api/upload', index: 5, limit: 6, multiple: false }, // 5
          // { name: 'vote', value: '', label: '当前票数', placeholder: '请输入票数', type: 'input' },
          { name: 'activityId', value: '', type: 'slot' } // 6
        ],
        rules: {
          // no: [{ required: true, validator: validator, trigger: 'blur' }],
          title: [{ required: true, validator: validator, trigger: 'blur' }]
        }
      },
      toolbarItems: [
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
      ]
    };
  },
  mounted: function() {
    this.activityId = this.$route.query.activityId;
    this.getInfo();
  },
  methods: {
    getInfo() {
      var self = this;
      var id = self.$route.query.id
      self.type = self.$route.query.type
      self.form.items[6].value = self.activityId;
      if (utils.validateData(id)) {
        self.form.id = id;
        var url = '/toupiao/admin/joinInfo';
        var params = { id: id }
        var success = function(response) {
          var info = response.info;
          var items = self.form.items
          for (var index in items) {
            for (var key in info) {
              if (items[index].name == key) {
                if (items[index].type == 'img') {
                  if (utils.validateData(info[key])) {
                    items[index].imgUrl = info[key];
                  }
                }
                if (items[index].type == 'images') {
                  if (utils.validateData(info[key])) {
                    var images = info[key].split(';')
                    for (var i in images) {
                      if (utils.validateData(images[i])) {
                        var filename = images[i].substring(images[i].lastIndexOf('/') + 1, images[i].indexOf('?') > 0 ? images[i].indexOf('?') : images[i].length );
                        var image = {
                          name: filename,
                          url: images[i]
                        }
                        items[index].list.push(image)
                      }
                    }
                  }
                }
                items[index].value = info[key]
              }
            }
          }
        }
        var fail = function() {
          utils.fail('加载失败')
        }
        var complete = function() {}
        utils.requestLoading(url, params, success, fail, complete)
      }
    },
    onContentChange(val) {
      this.form.items[2].value = val;
    },
    back() {
      window.history.back();
    }
  }
};

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  margin: 0 0 20px 150px;
  font-size: 18px;
  font-weight: bold;
}

.top-button {
  margin: 0 0 20px 150px;
}

</style>
